<template>
  <div class="detailBox" style="display: block">
    <div class="assets_H">
      <el-form :inline="true" :model="integral" class="demo-form-inline">
        <el-form-item label="收支类型：">
          <el-select
            v-model="integral.paymentType"
            placeholder="全部"
            @change="change"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收支子类型：">
          <el-select v-model="useType" placeholder="全部">
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：">
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="assets_B">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row.id)">立即处理</el-button>
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
import {
  adminTicketDetail,
  adminAssetPeriods,
  adminDict,
} from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "PointsDetail",
  props: {},
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      date: [],
      integral: {
        // paymentType: "",
        // useType: "",
        startTime: "",
        endTime: "",
        assetPeriods: "",
      },
      paymentType: 0,
      useType:'',
      merchantId: "",
      options: [
        {
          id: "0",
          value: "全部",
        },
      ],
      options2: [],
      options3: [],
      tableData: [],
      tableColumn: [
        { prop: "paymentTypeDict", label: "收支类型" },
        { prop: "useTypeDict", label: "收支子类型" },
        { prop: "phone", label: "会员手机号" },
        { prop: "changeCount", label: "数量" },
        { prop: "createTime", label: "时间" },
        { prop: "voucher", label: "交易块地址" },
      ],
      dictType: "",
      assetId: "",
    };
  },
  mounted() {
    let query = this.$route.query;
    this.merchantId = query.merchantId;
    this.assetId = query.assetId;
    this.getList();
    this.getBalancedlist();
  },
  methods: {
    change(e) {
      console.log(e);
      if (e == 1) {
        this.dictType = "merchant_wallet_log_give_type";
        this.paymentType = 1;
        this.integral.useType = "";
      } else if (e == 2) {
        this.dictType = "merchant_wallet_log_verification_type";
        this.paymentType = 2;
        this.integral.useType = "";
      } else if (e == 6) {
        this.dictType = "merchant_wallet_log_recycle_type";
        this.paymentType = 6;
        this.integral.useType = "";
      } else {
        this.dictType = "";
        this.integral.useType = "";
        this.paymentType = 0;
        this.options2 = [
          {
            id: "",
            value: "全部",
          },
        ];
        return;
      }
      this.subtype();
    },
    getBalancedlist() {
      //收支类型
      const params = {
        dictType: "merchant_wallet_log_type",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: 0,
            value: "全部",
          },
        ];
        this.options = arr.concat(res.result[0].dictList);
      });
    },
    subtype() {
      //收支子类型
      const params = {
        dictType: this.dictType,
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options2 = arr.concat(res.result[0].dictList);
      });
    },
    getadminAssetPeriods() {
      //积分发布期数
      const params = {
        assetId: this.assetId,
      };
      adminAssetPeriods(params).then((res) => {
        this.options3 = res.result;
      });
    },
    search() {
      console.log(this.integral);
      console.log(this.date);
      this.integral.startTime = this.date[0];
      this.integral.endTime = this.date[1];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.integral = {};
      this.date = [];
      this.paymentType = 0;
      this.useType = '';
      this.options2 = [
        {
          id: "",
          value: "全部",
        },
      ];
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        ...this.integral,
        paymentType: this.paymentType,
        useType: this.useType,
        merchantId: this.merchantId,
        assetId: this.assetId,
      };
      this.loading = true;
      adminTicketDetail(params)
        .then((res) => {
          const { total, records } = res.result;
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped>
.el-form--inline .el-form-item {
  margin-right: 20px;
}
</style>